<template>
  <div id="app">
    <audio :src="mus" class="media-audio" loop preload ref="MusicPlay" controls></audio>
    <el-button
      class="audio"
      type="text"
      @click="
        () => {
          trigger_music(audioPlaying);
        }
      "
    >
      <i
        class="iconfont"
        :class="[audioPlaying ? 'iconstop' : 'iconplay1']"
      ></i>
    </el-button>
    <button @click="get_music_status">获取音乐播放状态</button>
    <router-view v-on:trigger-music="trigger_music"></router-view>
  </div>
</template>

<script>
import { Button } from 'element-ui';
export default {
  components: {
    'el-button': Button
  },
  name: "app",
  data() {
    return {
      mus: require("./assets/music/抽奖-好运来.mp3"), //使用的音频
      audioPlaying: false,
    };
  },
  mounted(){
  },
  methods: {
    musicPause() {
      console.log("暂停");
      this.$refs.MusicPlay.pause();
      this.audioPlaying = false;
    },
    musicPlay() {
      console.log("播放");
      this.$refs.MusicPlay.play();
      this.audioPlaying = true;
    },
    get_music_status() {
      console.log(this.$refs.MusicPlay.paused);
      console.log("音频就绪状态:"+this.$refs.MusicPlay.readyState);
    },
    trigger_music(status){
      if(this.$refs.MusicPlay.readyState!=4){
        console.log("音乐未准备好");
        return false;
      }
      if(status=='play' || !status){
        this.musicPlay();
        return;
      }
      if(status=='pause' || status){
        this.musicPause();
        return;
      }
      return;
    },
  }
};
</script>

<style lang="less">
@font-face {
  font-family: "HWXK";
  src: url("./assets/font/华文行楷.ttf");
}
</style>

<style lang="less" scoped>
.audio {
    position: absolute;
    top: 100px;
    right: 30px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border: 1px solid greenyellow;
    border-radius: 50%;
    padding: 0;
    text-align: center;
    z-index: 99;
    .iconfont {
      position: relative;
      left: 1px;
    }
  }
  .el-button--text{
    color: yellow;
  }
</style>
